<template>
  <el-container>
    <!-- 选择教室按钮 -->
    <el-header>
      <el-button
        v-for="(floor,index) in floorLists"
        :key="floor.title"
        v-on:click="selectFloor(floor.index,floor.title)"
        class="floortitle"
        type="primary"
        plain
        text
        size="large"
      >
        <el-icon><Collection /></el-icon>
        {{ floor.title }}
      </el-button>
    </el-header>

    <!-- 教室图片显示 -->
    <el-main class="el-main-main">
      <el-row>
        <el-col :span="20" :offset="2">
          <img :src="room.src" v-for="room in roomLists" :title="room.title" />
        </el-col>
      </el-row>
    </el-main>
  </el-container>

  <!-- 选择教室弹出框 -->
  <el-dialog
    v-model="dialogVisible"
    title="请选择教室"
    width="50%"
    padding-left="50px"
    :before-close="handleClose"
  >

    <el-button
        v-for="(room,index) in roomLists1"
        :key="room.title"
        v-on:click="selectRoom(room.index,room.title)"
        :type="room.type"
        class="roomtitle"
        plain
        size="large"
      >
        <el-icon><Headset /></el-icon>
        {{ room.title }}
    </el-button>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          <router-link to="/PreorderVue" target="_self">确认</router-link>
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: "RoomVue",
  data() {
    return {
      floorLists: [
        { index: 1, title: "图书馆 1 层" },
        { index: 2, title: "图书馆 2 层" },
        { index: 3, title: "图书馆 3 层" },
        { index: 4, title: "图书馆 4 层" },
        { index: 5, title: "图书馆 5 层" },
      ],
      roomLists: [
        {
          src: "/src/img/room1.png",
          title: "一号教室",
        },
        {
          src: "/src/img/room2.png",
          title: "二号教室",
        },
        {
          src: "/src/img/room3.jpg",
          title: "三号教室",
        },
        {
          src: "/src/img/room4.png",
          title: "四号教室",
        },
      ],
      roomLists1: [
        { index: "01", title: "一号教室", type:"primary" },
        { index: "02", title: "二号教室", type:"success"},
        { index: "03", title: "三号教室", type:"info" },
        { index: "04", title: "四号教室", type:"warning"},
        { index: "05", title: "五号教室", type:"danger" },
      ],
      dialogVisible: false,
    };
  },
  methods: {
    selectFloor(fno,title) {
      this.dialogVisible = true;
      // console.log(fno);
      // console.log(title);

      this.$store.commit("setFloorInfo",title);
      this.$store.commit("setfno",fno);
      // console.log(this.$store.state.roomtitle);
    },
    selectRoom(rno,rtitle) {
      // console.log(rno);
      // console.log(rtitle);

      this.$store.commit("setRoomInfo",rtitle);
      this.$store.commit("setrno",rno);
      console.log(this.$store.state.seatInfo.fno);
      console.log(this.$store.state.seatInfo.rno);
    },
  },
};
</script>

<style scoped>
img {
  width: 460px;
  height: 250px;
  margin-right: 10px;
  margin-bottom: 5px;
}
.floortitle {
  font-size: 20px;
  margin: 0 30px;
}

.roomtitle {
  font-size: 17px;
  /* margin: 0 30px; */
}

.floortitle:hover {
  background-color: #fff;
  color: deepskyblue;
}
</style>